{{/*
  文章卡片图片组件 - 处理封面图片和占位图的统一逻辑

  参数：
  - .page: 页面对象
  - .type: 图片类型 ("mobile", "desktop", "related")
  - .coverImage: 封面图片URL (可选，如果不提供将使用image-processor处理)
*/}}

{{- $page := .page -}}
{{- $type := .type -}}
{{- $coverImage := .coverImage -}}

{{/* 根据类型设置不同的样式参数 */}}
{{- $containerClass := "" -}}
{{- $aspectClass := "" -}}
{{- $patternType := "" -}}

{{- if eq $type "mobile" -}}
  {{- $containerClass = "aspect-[2/1] overflow-hidden" -}}
  {{- $aspectClass = "aspect-[2/1]" -}}
{{- else if eq $type "desktop" -}}
  {{- $containerClass = "h-full w-full" -}}
  {{- $aspectClass = "h-full w-full" -}}
{{- else if eq $type "related" -}}
  {{- $containerClass = "relative aspect-[16/9] flex-shrink-0 overflow-hidden" -}}
  {{- $aspectClass = "aspect-[16/9]" -}}
{{- end -}}

{{/* 读取占位图配置 */}}
{{- $placeholderConfig := site.Data.placeholder_images | default dict -}}
{{- $placeholderEnabled := $placeholderConfig.enabled | default false -}}
{{- $placeholderImages := $placeholderConfig.images | default (slice) -}}
{{- $randomPlaceholder := "" -}}
{{- if and $placeholderEnabled (gt (len $placeholderImages) 0) -}}
  {{/* 基于文章标题和路径生成稳定的随机索引 */}}
  {{- $seed := printf "%s-%s" $page.Title $page.RelPermalink -}}
  {{- $hash := md5 $seed -}}
  {{- $randomIndex := mod (int (substr $hash 0 8 | printf "0x%s")) (len $placeholderImages) -}}
  {{- $randomPlaceholder = index $placeholderImages $randomIndex -}}
{{- end -}}

{{/* 如果没有提供coverImage，按优先级处理图片 */}}
{{- if not $coverImage -}}
  {{- if $page.Params.cover -}}
    {{- partial "content/image-processor.html" (dict
      "context" $page
      "src" $page.Params.cover
      "enablePlaceholder" true
      "outputType" "data"
    ) -}}
    {{- $coverImage = $page.Scratch.Get "imageUrl" -}}
  {{- else if $randomPlaceholder -}}
    {{- partial "content/image-processor.html" (dict
      "context" $page
      "src" $randomPlaceholder
      "enablePlaceholder" false
      "outputType" "data"
    ) -}}
    {{- $coverImage = $page.Scratch.Get "imageUrl" -}}
  {{- end -}}
{{- end -}}

{{/* 基于文章标题生成图案类型和颜色（用于几何占位图） */}}
{{- $hash := md5 $page.Title -}}
{{- $patternIndex := mod (int (substr $hash 2 2 | printf "0x%s")) 4 -}}
{{- if eq $patternIndex 0 -}}
  {{- $patternType = "triangle" -}}
{{- else if eq $patternIndex 1 -}}
  {{- $patternType = "diamond" -}}
{{- else if eq $patternIndex 2 -}}
  {{- $patternType = "hexagon" -}}
{{- else -}}
  {{- $patternType = "circle" -}}
{{- end -}}

{{/* 生成渐变色索引 */}}
{{- $gradients := slice 
  "from-blue-500/20 to-purple-500/10" 
  "from-green-500/20 to-blue-500/10" 
  "from-purple-500/20 to-pink-500/10" 
  "from-orange-500/20 to-red-500/10" 
  "from-teal-500/20 to-green-500/10" 
  "from-indigo-500/20 to-purple-500/10" 
  "from-pink-500/20 to-rose-500/10" 
  "from-cyan-500/20 to-blue-500/10" -}}
{{- $colorIndex := mod (int (substr $hash 4 2 | printf "0x%s")) (len $gradients) -}}

<div class="{{ $containerClass }}">
  {{- if $coverImage -}}
    <!-- 文章封面图 -->
    <img
      src="{{ $coverImage }}"
      alt="{{ $page.Title }}"
      class="h-full w-full object-cover{{ if ne $type "desktop" }} transition-transform duration-300 group-hover:scale-105{{ end }}"
      loading="lazy"
      onerror="this.style.display='none'; this.nextElementSibling.style.display='{{ if eq $type `related` }}flex{{ else }}block{{ end }}';" />
    <!-- 封面图加载失败时的几何占位图回退 -->
    <div class="{{ index $gradients $colorIndex }} relative {{ $aspectClass }} overflow-hidden bg-gradient-to-br" style="display: none; background-blend-mode: overlay; background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);">
      <!-- 几何图案分布在整个区域 -->
      <div class="absolute inset-0">
        {{ if eq $patternType "triangle" }}
          <!-- 三角形分布图案 -->
          <!-- 左上三角形 -->
          <div class="absolute left-[15%] top-[20%] rotate-45">
            <div class="h-0 w-0 border-l-[10px] border-r-[10px] border-b-[16px] border-l-transparent border-r-transparent border-b-white/80"></div>
          </div>
          <!-- 右上三角形 -->
          <div class="absolute right-[20%] top-[15%] rotate-12">
            <div class="h-0 w-0 border-l-[8px] border-r-[8px] border-b-[12px] border-l-transparent border-r-transparent border-b-white/70"></div>
          </div>
          <!-- 左下三角形 -->
          <div class="absolute left-[25%] bottom-[25%] -rotate-30">
            <div class="h-0 w-0 border-l-[6px] border-r-[6px] border-b-[10px] border-l-transparent border-r-transparent border-b-white/60"></div>
          </div>
          <!-- 右下三角形 -->
          <div class="absolute right-[15%] bottom-[20%] rotate-60">
            <div class="h-0 w-0 border-l-[7px] border-r-[7px] border-b-[11px] border-l-transparent border-r-transparent border-b-white/65"></div>
          </div>
          <!-- 中心区域小三角形 -->
          <div class="absolute left-[45%] top-[40%] -rotate-15">
            <div class="h-0 w-0 border-l-[5px] border-r-[5px] border-b-[8px] border-l-transparent border-r-transparent border-b-white/50"></div>
          </div>
          <!-- 装饰圆点 -->
          <div class="absolute right-[35%] top-[35%] h-2 w-2 rounded-full bg-white/40"></div>
          <div class="absolute left-[40%] bottom-[35%] h-1.5 w-1.5 rounded-full bg-white/35"></div>
          <div class="absolute right-[45%] bottom-[45%] h-1 w-1 rounded-full bg-white/30"></div>
          <!-- 装饰线条 -->
          <div class="absolute top-[30%] left-[30%] h-0.5 w-6 rotate-45 bg-white/25"></div>
          <div class="absolute bottom-[30%] right-[30%] h-0.5 w-4 -rotate-30 bg-white/20"></div>
        {{ else if eq $patternType "diamond" }}
          <!-- 菱形分布图案 -->
          <!-- 左上菱形 -->
          <div class="absolute left-[20%] top-[20%] h-5 w-5 rotate-45 border-2 border-white/80 bg-white/15"></div>
          <!-- 右上菱形 -->
          <div class="absolute right-[25%] top-[25%] h-4 w-4 rotate-12 border border-white/70 bg-white/12"></div>
          <!-- 左下菱形 -->
          <div class="absolute left-[30%] bottom-[30%] h-3 w-3 rotate-60 border border-white/60 bg-white/10"></div>
          <!-- 右下菱形 -->
          <div class="absolute right-[20%] bottom-[20%] h-4 w-4 rotate-30 border border-white/65 bg-white/13"></div>
          <!-- 中心区域小菱形 -->
          <div class="absolute left-[45%] top-[45%] h-2 w-2 rotate-45 border border-white/50 bg-white/8"></div>
          <!-- 装饰线条 -->
          <div class="absolute left-[15%] top-[40%] h-0.5 w-8 rotate-45 bg-white/40"></div>
          <div class="absolute right-[15%] top-[35%] h-0.5 w-6 rotate-12 bg-white/35"></div>
          <div class="absolute left-[40%] bottom-[15%] h-0.5 w-5 -rotate-30 bg-white/30"></div>
          <!-- 装饰圆点 -->
          <div class="absolute top-[35%] right-[40%] h-2 w-2 rounded-full bg-white/35"></div>
          <div class="absolute bottom-[40%] left-[35%] h-1.5 w-1.5 rounded-full bg-white/30"></div>
          <div class="absolute top-[50%] left-[50%] h-1 w-1 rounded-full bg-white/25"></div>
        {{ else if eq $patternType "hexagon" }}
          <!-- 五角星分布图案 -->
          <!-- 左上五角星 -->
          <div class="absolute left-[20%] top-[20%] h-5 w-5 rotate-0 bg-white/80" style="clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)"></div>
          <!-- 右上五角星 -->
          <div class="absolute right-[25%] top-[25%] h-4 w-4 rotate-36 bg-white/70" style="clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)"></div>
          <!-- 左下五角星 -->
          <div class="absolute left-[30%] bottom-[30%] h-3 w-3 rotate-72 bg-white/60" style="clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)"></div>
          <!-- 右下五角星 -->
          <div class="absolute right-[20%] bottom-[20%] h-4 w-4 rotate-108 bg-white/65" style="clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)"></div>
          <!-- 中心区域小五角星 -->
          <div class="absolute left-[45%] top-[45%] h-2 w-2 rotate-144 bg-white/50" style="clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)"></div>
          <!-- 装饰圆点 -->
          <div class="absolute right-[35%] top-[35%] h-2 w-2 rounded-full bg-white/40"></div>
          <div class="absolute left-[40%] bottom-[35%] h-1.5 w-1.5 rounded-full bg-white/35"></div>
          <div class="absolute right-[45%] bottom-[45%] h-1 w-1 rounded-full bg-white/30"></div>
          <!-- 装饰线条 -->
          <div class="absolute top-[30%] left-[30%] h-0.5 w-6 rotate-30 bg-white/25"></div>
          <div class="absolute bottom-[30%] right-[30%] h-0.5 w-4 -rotate-45 bg-white/20"></div>
        {{ else }}
          <!-- 圆形分布图案 -->
          <!-- 左上圆形 -->
          <div class="absolute left-[20%] top-[20%] h-6 w-6 rounded-full border-2 border-white/80 bg-white/15"></div>
          <!-- 右上圆形 -->
          <div class="absolute right-[25%] top-[25%] h-5 w-5 rounded-full border border-white/70 bg-white/12"></div>
          <!-- 左下圆形 -->
          <div class="absolute left-[30%] bottom-[30%] h-4 w-4 rounded-full border border-white/60 bg-white/10"></div>
          <!-- 右下圆形 -->
          <div class="absolute right-[20%] bottom-[20%] h-5 w-5 rounded-full border border-white/65 bg-white/13"></div>
          <!-- 中心区域小圆形 -->
          <div class="absolute left-[45%] top-[45%] h-3 w-3 rounded-full border border-white/50 bg-white/8"></div>
          <!-- 装饰小圆点 -->
          <div class="absolute right-[35%] top-[35%] h-2 w-2 rounded-full bg-white/50"></div>
          <div class="absolute left-[40%] bottom-[35%] h-1.5 w-1.5 rounded-full bg-white/45"></div>
          <div class="absolute left-[35%] top-[50%] h-1 w-1 rounded-full bg-white/40"></div>
          <div class="absolute right-[40%] bottom-[50%] h-1 w-1 rounded-full bg-white/35"></div>
          <div class="absolute left-[50%] top-[30%] h-1 w-1 rounded-full bg-white/30"></div>
          <div class="absolute right-[50%] bottom-[30%] h-1 w-1 rounded-full bg-white/25"></div>
          <!-- 装饰线条 -->
          <div class="absolute top-[40%] left-[15%] h-0.5 w-6 rotate-30 bg-white/25"></div>
          <div class="absolute bottom-[40%] right-[15%] h-0.5 w-4 -rotate-30 bg-white/20"></div>
        {{ end }}
      </div>
    </div>
  {{ else }}
    <!-- 统一占位图 -->
    <div class="{{ index $gradients $colorIndex }} relative {{ $aspectClass }} overflow-hidden bg-gradient-to-br" style="background-blend-mode: overlay; background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);">
      <!-- 几何图案分布在整个区域 -->
      <div class="absolute inset-0">
        {{ if eq $patternType "triangle" }}
          <!-- 三角形分布图案 -->
          <!-- 左上三角形 -->
          <div class="absolute left-[15%] top-[20%] rotate-45">
            <div class="h-0 w-0 border-l-[10px] border-r-[10px] border-b-[16px] border-l-transparent border-r-transparent border-b-white/80"></div>
          </div>
          <!-- 右上三角形 -->
          <div class="absolute right-[20%] top-[15%] rotate-12">
            <div class="h-0 w-0 border-l-[8px] border-r-[8px] border-b-[12px] border-l-transparent border-r-transparent border-b-white/70"></div>
          </div>
          <!-- 左下三角形 -->
          <div class="absolute left-[25%] bottom-[25%] -rotate-30">
            <div class="h-0 w-0 border-l-[6px] border-r-[6px] border-b-[10px] border-l-transparent border-r-transparent border-b-white/60"></div>
          </div>
          <!-- 右下三角形 -->
          <div class="absolute right-[15%] bottom-[20%] rotate-60">
            <div class="h-0 w-0 border-l-[7px] border-r-[7px] border-b-[11px] border-l-transparent border-r-transparent border-b-white/65"></div>
          </div>
          <!-- 中心区域小三角形 -->
          <div class="absolute left-[45%] top-[40%] -rotate-15">
            <div class="h-0 w-0 border-l-[5px] border-r-[5px] border-b-[8px] border-l-transparent border-r-transparent border-b-white/50"></div>
          </div>
          <!-- 装饰圆点 -->
          <div class="absolute right-[35%] top-[35%] h-2 w-2 rounded-full bg-white/40"></div>
          <div class="absolute left-[40%] bottom-[35%] h-1.5 w-1.5 rounded-full bg-white/35"></div>
          <div class="absolute right-[45%] bottom-[45%] h-1 w-1 rounded-full bg-white/30"></div>
          <!-- 装饰线条 -->
          <div class="absolute top-[30%] left-[30%] h-0.5 w-6 rotate-45 bg-white/25"></div>
          <div class="absolute bottom-[30%] right-[30%] h-0.5 w-4 -rotate-30 bg-white/20"></div>
        {{ else if eq $patternType "diamond" }}
          <!-- 菱形分布图案 -->
          <!-- 左上菱形 -->
          <div class="absolute left-[20%] top-[20%] h-5 w-5 rotate-45 border-2 border-white/80 bg-white/15"></div>
          <!-- 右上菱形 -->
          <div class="absolute right-[25%] top-[25%] h-4 w-4 rotate-12 border border-white/70 bg-white/12"></div>
          <!-- 左下菱形 -->
          <div class="absolute left-[30%] bottom-[30%] h-3 w-3 rotate-60 border border-white/60 bg-white/10"></div>
          <!-- 右下菱形 -->
          <div class="absolute right-[20%] bottom-[20%] h-4 w-4 rotate-30 border border-white/65 bg-white/13"></div>
          <!-- 中心区域小菱形 -->
          <div class="absolute left-[45%] top-[45%] h-2 w-2 rotate-45 border border-white/50 bg-white/8"></div>
          <!-- 装饰线条 -->
          <div class="absolute left-[15%] top-[40%] h-0.5 w-8 rotate-45 bg-white/40"></div>
          <div class="absolute right-[15%] top-[35%] h-0.5 w-6 rotate-12 bg-white/35"></div>
          <div class="absolute left-[40%] bottom-[15%] h-0.5 w-5 -rotate-30 bg-white/30"></div>
          <!-- 装饰圆点 -->
          <div class="absolute top-[35%] right-[40%] h-2 w-2 rounded-full bg-white/35"></div>
          <div class="absolute bottom-[40%] left-[35%] h-1.5 w-1.5 rounded-full bg-white/30"></div>
          <div class="absolute top-[50%] left-[50%] h-1 w-1 rounded-full bg-white/25"></div>
        {{ else if eq $patternType "hexagon" }}
          <!-- 五角星分布图案 -->
          <!-- 左上五角星 -->
          <div class="absolute left-[20%] top-[20%] h-5 w-5 rotate-0 bg-white/80" style="clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)"></div>
          <!-- 右上五角星 -->
          <div class="absolute right-[25%] top-[25%] h-4 w-4 rotate-36 bg-white/70" style="clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)"></div>
          <!-- 左下五角星 -->
          <div class="absolute left-[30%] bottom-[30%] h-3 w-3 rotate-72 bg-white/60" style="clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)"></div>
          <!-- 右下五角星 -->
          <div class="absolute right-[20%] bottom-[20%] h-4 w-4 rotate-108 bg-white/65" style="clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)"></div>
          <!-- 中心区域小五角星 -->
          <div class="absolute left-[45%] top-[45%] h-2 w-2 rotate-144 bg-white/50" style="clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)"></div>
          <!-- 装饰圆点 -->
          <div class="absolute right-[35%] top-[35%] h-2 w-2 rounded-full bg-white/40"></div>
          <div class="absolute left-[40%] bottom-[35%] h-1.5 w-1.5 rounded-full bg-white/35"></div>
          <div class="absolute right-[45%] bottom-[45%] h-1 w-1 rounded-full bg-white/30"></div>
          <!-- 装饰线条 -->
          <div class="absolute top-[30%] left-[30%] h-0.5 w-6 rotate-30 bg-white/25"></div>
          <div class="absolute bottom-[30%] right-[30%] h-0.5 w-4 -rotate-45 bg-white/20"></div>
        {{ else }}
          <!-- 圆形分布图案 -->
          <!-- 左上圆形 -->
          <div class="absolute left-[20%] top-[20%] h-6 w-6 rounded-full border-2 border-white/80 bg-white/15"></div>
          <!-- 右上圆形 -->
          <div class="absolute right-[25%] top-[25%] h-5 w-5 rounded-full border border-white/70 bg-white/12"></div>
          <!-- 左下圆形 -->
          <div class="absolute left-[30%] bottom-[30%] h-4 w-4 rounded-full border border-white/60 bg-white/10"></div>
          <!-- 右下圆形 -->
          <div class="absolute right-[20%] bottom-[20%] h-5 w-5 rounded-full border border-white/65 bg-white/13"></div>
          <!-- 中心区域小圆形 -->
          <div class="absolute left-[45%] top-[45%] h-3 w-3 rounded-full border border-white/50 bg-white/8"></div>
          <!-- 装饰小圆点 -->
          <div class="absolute right-[35%] top-[35%] h-2 w-2 rounded-full bg-white/50"></div>
          <div class="absolute left-[40%] bottom-[35%] h-1.5 w-1.5 rounded-full bg-white/45"></div>
          <div class="absolute left-[35%] top-[50%] h-1 w-1 rounded-full bg-white/40"></div>
          <div class="absolute right-[40%] bottom-[50%] h-1 w-1 rounded-full bg-white/35"></div>
          <div class="absolute left-[50%] top-[30%] h-1 w-1 rounded-full bg-white/30"></div>
          <div class="absolute right-[50%] bottom-[30%] h-1 w-1 rounded-full bg-white/25"></div>
          <!-- 装饰线条 -->
          <div class="absolute top-[40%] left-[15%] h-0.5 w-6 rotate-30 bg-white/25"></div>
          <div class="absolute bottom-[40%] right-[15%] h-0.5 w-4 -rotate-30 bg-white/20"></div>
        {{ end }}
      </div>
    </div>
  {{ end }}
</div>